<template name="discus">
<div>
   <div class="content">
      <ul>
        <li class="clearfloat" v-for="(value,index) in data1" >
        <img :src="value.sex == 1 ? 'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/sex-boy.png' :'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/sex-girl.png'" class="sex"/>
          <img :src="value.photo_url"class="contentImg"/>
          <div class="contentContent clearfloat">
            <span class="content_name">{{value.nickname}}</span>
            <span class="content_time">{{value.msg_time}} , 已经坚持了{{value.keep_day}}天</span>
            <span class="content_content">{{value.msg_content}}</span>
            <span class="content_click clearfloat">
              <span class="content_good" @click="good(value.id)"><img :src="value.goodImg"/>点赞</span>
              <span class="content_discuss" @click="discuss(value.id)"><img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/btn-comment.png"/>评论</span>
            </span>
          </div>
          <div class="showDo clearfloat">
            <div class="goodName">
              <span v-for="(value1,index1) in value.like_list"><img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/like.png"/>{{value1.nickname}}</span>
            </div>
            <ul class="discus clearfloat">
              <li class="clearfloat oli" v-for="(value2,index2) in value.comment_list">
                  <span class="discussName">{{value2.nickname}} : </span>{{value2.content}}
              </li>
            </ul>
          </div>
        </li>
      </ul>
     </div>
   </div>
</template>
<script>
export default {
  data () {
    return {
      key:false,
      focus:false
    }
  },
  methods:{
    discuss(value){    //评论
     this.$store.dispatch('setdiscussType','comment');    //设置当前发布的时候评论还是打卡信息
     this.$store.dispatch('setDuid',value)     //设置当前评论的文章id
     wx.navigateTo({
      url:"../release/main?type=disucss"
     })
   },
   removeByValue(arr, val) {      //这个是用于删除指定数组的元素
    for(var i=0; i<arr.length; i++) {  
    if(arr[i].nickname == val) {  
      arr.splice(i, 1);  
      break;  
        }
      }  
   },
   good(value){         //点赞
    this.setGood(value)
   },
   setGood(value){       //点赞请求后台数据
        var userToken=wx.getStorageSync('userToken');
        var _this=this
        wx.request({
        url:'https://daka.rzkeji.com/api/daka/set-user-like',
        header: {
        'content-type': 'application/json' // 默认值
        },
        data:{
        du_id:value,
        daka_token :userToken
        },
        method: "post",
        success: function(res) {
          if(res.data.data.type=="add")
          { 
            for(var i=0;i<_this.data1.length;i++)
            {
              if(value==_this.data1[i].id)
              {
              _this.data1[i].goodImg="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/like-active.png"
              _this.data1[i].like_list.push({
              nickname:_this.$store.state.userInfo.nickName
              })
              }
            };
          }else{
            for(var i=0;i<_this.data1.length;i++)
            {
              if(value==_this.data1[i].id)
              {
              _this.data1[i].goodImg="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/like.png"
              _this.removeByValue(_this.data1[i].like_list, _this.$store.state.userInfo.nickName);
              }
            };
          }
        }
      })
    }
  },
  onLoad () {
  var _this=this;
  wx.request({       //获取用户的打卡信息列表
    url: 'https://daka.rzkeji.com/api/daka/get-daka-detail', //仅为示例，并非真实的接口地址
    header: {
    'content-type': 'application/json' // 默认值
    },
    data:{
      id:_this.$store.state.dakaId
    },
    success(res){
        var details=res.data.data;
        _this.data1=_this.data1.splice(0,_this.data1.length);    //清空数组，以防数据重复
        _this.$store.dispatch('setComment',_this.data1);
        for(var i=details.daka_user_list.length-1;i>=0;i--)
        {
          _this.$store.dispatch('setCommentId',details.id)

          _this.data1.push({
              "id":details.daka_user_list[i].id,
              "photo_url":details.daka_user_list[i].photo_url,
              "sex":details.daka_user_list[i].sex,
              "nickname":details.daka_user_list[i].nickname,
              "msg_time":details.daka_user_list[i].daka_time,
              "msg_content":details.daka_user_list[i].content,
              "like_list":details.daka_user_list[i].like_list,
              "comment_list":details.daka_user_list[i].comment_list,
              "keep_day":details.daka_user_list[i].keep_day,
              "goodImg":'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/like.png'
          })
        }
        _this.$store.dispatch('setComment',_this.data1)
        for(var j=0;j<_this.data1.length;j++)
        {
            for(var h=0;h<_this.data1[j].like_list.length;h++)
            { 
              if(_this.data1[j].like_list[h].nickname==_this.$store.state.userInfo.nickName)
              {
              _this.data1[j].goodImg="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/daka/icon/like-active.png"
              }
            }
        }
      }
   })
  },
  computed:{
    data1(){
        return this.$store.state.comment;
    }
  }
}
</script>

<style scoped>
.content{width: 100%;}
.content ul{width: 100%;}
.content>ul>li{width: 100%;background: #fff;margin-bottom: 10px;position: relative;}
.contentImg{width: 50px;float: left;margin-top: 10px;margin-left:5px;height: 50px;border-radius: 50px;}
.sex{width: 25px;height: 25px;position: absolute;left: 10%;top: 37px}
.contentContent{width: 78%;float: left;margin-left: 6%;margin-top: 10px}
.content_name{width: 100%;height: 26px;line-height: 26px;font-size: 16px;display: block;font-weight: 600;color: #62749c;}
.content_time{width: 100%;height: 18px;line-height: 18px;font-size: 14px;display: block;margin-top: 5px;margin-bottom: 8px;color:#aaaaaa;}
.content_content{width: 100%;line-height: 22px;font-size: 17px;display: block;color: #333333;margin-bottom:18px;}
.content_good{width: 22%;height: 23px;display: block;float: left;line-height: 10px;font-size: 16px;}
.content_good img{width: 18px;height: 18px;vertical-align: middle;margin-right: 2px;margin-top: -4px}
.content_click{margin-top: 5px;display: block;color: gray}
.content_discuss{width: 22%;height: 23px;display: block;float: left;margin-left:7px;padding-left: 20px;line-height: 10px;font-size: 16px;}
.content_discuss img{width: 18px;height: 18px;vertical-align: middle;margin-right: 2px;margin-top: -4px}

.showDo{width: 80%;float: left;margin-left:21%;background:#f5f5f5;margin-bottom: 10px;margin-top: 15px;}
.goodName  {width: 100%;line-height: 30px;font-size: 14px;color: #2894ff}
.goodName span{padding-right: 5px;}
.goodName  img{width: 16px;height: 16px;vertical-align: middle;margin-right: 2px;margin-top: -2.5px;}
.discussName{color: #2894ff;}
.discussContent{margin-left: 15px;}
.oli{word-wrap:break-word;font-size: 14px}
.inputDiscuss{width: 100%;border:1px solid gray;border-radius: 4px}
</style>